<template>
  <div>
    <div class="home-banner">
      <header :class="isVisible?'header-navigation slideDown':'header-navigation slideUp'" id="header" >
        <nav>
          <div class="mylogo">
            <div class="logo">
              <router-link to="/">
                <a href="javascript:void(0);" v-if="info.name">{{info.name}}</a>
              </router-link>
            </div>
            <h2 id="mnavh" @click="openHead" :class="showHead?'open':''">
              <span class="navicon"></span>
            </h2>
          </div>
          <div class="container">
            <!-- 横排列表 -->
            <ul id="nav">
                <li>
                    <router-link to="/">
                    <a href="javascript:void(0);">首页</a>
                    </router-link>
                </li>

                <li>
                    <router-link to="/gd">
                    <a href="javascript:void(0);" >归档</a>
                    </router-link>
                </li>
                <li>
                    <router-link to="/type">
                    <a href="javascript:void(0);" >分类</a>
                    </router-link>
                </li>

                <li>
                    <router-link to="/pd">
                    <a href="javascript:void(0);" >标签</a>
                    </router-link>
                </li>
                <li>
                    <router-link to="/say">
                    <a href="javascript:void(0);" >留言板</a>
                    </router-link>
                </li>
                <li>
                    <router-link to="/writer">
                    <a href="javascript:void(0);">写文章</a>
                    </router-link>
                </li>
                <li>
                    <router-link to="/about">
                    <a href="javascript:void(0);" >关于我</a>
                    </router-link>
                </li>
                <div id="lavalamp"></div>
            </ul>
        </div>  
        <div class="searchbox">
              <!-- 搜索 -->
              <div id="search_bar" class="search_bar search_open">
                <input
                  ref="searchInput"
                  class="input"
                  placeholder="想搜点什么呢.."
                  type="text"
                  name="keyboard"
                  v-model="keyword"
                  v-on:keyup.enter="search"
                >
                <p class="search_ico" @click="clickSearchIco" :style="(browserFlag == 1)?'':'top:13px'">
                  <span></span>
                </p>
              </div>
          </div>
          <div class="login">
             <!-- 登录 -->
            <el-dropdown  class="userInfoAvatar">
              <span class="el-dropdown-link" >
                <el-badge  :value="userReceiveCommentCount"  class="item" :hidden="isLogin || userReceiveCommentCount == 0">
                  <img v-if="!isLogin" src="../../static/images/defaultAvatar.png">
                  <img v-if="isLogin&&userInfo.photoUrl!=undefined" :src="userInfo.photoUrl" onerror="onerror=null;src=defaultAvatar">
                  <img v-if="isLogin&&userInfo.photoUrl==undefined"
                      :src="defaultAvatar">
                </el-badge>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="login" v-show="!isLogin">登录</el-dropdown-item>
                <el-dropdown-item command="goUserInfo" v-show="isLogin">个人中心</el-dropdown-item>
                <el-dropdown-item command="logout" v-show="isLogin">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </nav>
      </header>
    </div>
  </div>
</template>
<script>
import {getWebNavbar} from '../api/index';
// vuex中有mapState方法，相当于我们能够使用它的getset方法
import {mapMutations} from 'vuex';
export default {
    name:'HomeIndex',
    components:{

    },
    data(){
       return{
           msg:'sshshsh',
           isVisible:true,
           isLogin:false,
           browserFlag:1, //chrome浏览器
           userReceiveCommentCount:0,
           userInfo: { // 用户信息
           },
           keyword:'',
           info: {
             name:'源识空间'
           },
           showHead: false,
       }

    },
    methods:{
      //拿到vuex中的写的方法
    ...mapMutations(['setUserInfo', 'setLoginState', 'setWebConfigData']),
    // 搜索
    search: function () {
      if (this.keyword == "" || this.keyword.trim() == "") {
        this.$notify.error({
          title: '错误',
          message: "关键字不能为空",
          type: 'success',
          offset: 100
        });
        return;
      }
      this.$router.push({path: "/list", query: {keyword: this.keyword, model: this.searchModel}});
    },
      clickSearchIco: function () {
      if(this.keyword != "") {
        this.search();
      }
      this.showSearch = !this.showSearch;
      //获取焦点
      this.$refs.searchInput.focus();
    },
    openHead: function () {
      this.showHead = !this.showHead;
    },
    

    }
}
</script>
<style  scoped>
@import "../assets/css/home/menu.css";
  .home-banner {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 100vh;
  /* background: url("../assets/img/psc.jpg") center center /
    cover no-repeat; */
  background-color: #313131;
  background-attachment: fixed;
  text-align: center;
  color: #313131 !important;
  animation: header-effect 1s;
}

.userInfoAvatar {
  width: 35px;
  height: 35px;
  position: absolute;
  right: -1200px;
  color: #fff;
}

.userInfoAvatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.login{
    position: absolute;
  }
  .searchbox {
    position: absolute;
    float: left;
    top: 0;
    right: 150px;

  }
@media only screen and (max-width: 1300px) {
  .userInfoAvatar {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0px;
  }
}
.mylogo{
  position: absolute;
  float: left;
  left: -100px;
}
</style>